<template>
  <div>
    <el-table
      :header-cell-style="tableParam.headerCellStyle?tableParam.headerCellStyle:{ background: '#3268c6 !important', color: '#fff' }"
      v-loading="listLoading"
      :data="tableData"
      :size="tableParam.size ? tableParam.size : ''"
      :height="tableParam.height ? tableParam.height : null"
      :border="tableParam.border ? true : false"
      :row-key="tableParam.rowKey ? tableParam.rowKey : null"
      :row-style="tableParam.rowStyle ? tableParam.rowStyle : null"
      :script="tableParam.script ? tableParam.script : true"
      :highlight-current-row="tableParam.highlightCurrentRow ? true : false"
      :show-summary="tableParam.showSummary ? true : false"
      :default-sort="tableParam.defaultSort ? tableParam.defaultSort : {}"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      element-loading-text="正在查询中。。。"
      fit
      ref="hsTable"
      @select="select"
      @select-all="selectAll"
    >
      <!-- tooltip-effect="dark" -->
      <!-- 是否多选 -->
      <el-table-column
        v-if="tableParam.multi ? tableParam.multi : false"
        type="selection"
        width="55"
        :selectable="tableParam.checkSelectable ? (row,index)=>tableParam.checkSelectable(row,index) : null"
      ></el-table-column>
      <slot name="expand"></slot>
      <!-- 数据列遍历 -->
      <el-table-column
        v-for="(item, index) in tableParam.columns"
        :key="index"
        :align="item.align?item.align:'center'"
        :type="item.expand ? item.expand : null"
        :fixed="item.fixedDirect ? item.fixedDirect : false"
        :prop="item.prop ? item.prop : ''"
        :label="item.label ? item.label : ''"
        :width="item.width ? item.width + 'px' : ''"
        :sortable="item.sortable ? item.sortable : false"
        :show-overflow-tooltip="item.showOverflowTooltip ? item.showOverflowTooltip : false"
        :filters="item.filters ? item.filters : null"
        :filter-method="item.filters ? item.filterTag : null"
        :formatter="item.formatter ? item.formatter : null"
        :class-name="item.className ? item.className :(item.batchStatus? 'colItem':'')"
      >
      <!-- :class-name="item.className ? item.className :(item.batchStatus? 'colItemGreen':'colItemRed')" -->
        <template slot="header" v-if="item.slotHeader">
          <i v-if="item.slotHeaderIcon" :class="item.slotHeaderIcon"
            @click="emit('editGoodsDetail')"
          ></i>

          <template v-else>
          <i class="el-icon-d-arrow-left upIcon large" v-show="tableParam.headerActionIconVal" @click="tableParam.headerActionIconVal=!tableParam.headerActionIconVal,item.$events&&item.$events.headerClick?item.$events.headerClick($event):null"></i>
          <i class="el-icon-d-arrow-right upIcon large" v-show="!tableParam.headerActionIconVal" @click="tableParam.headerActionIconVal=!tableParam.headerActionIconVal,item.$events&&item.$events.headerClick?item.$events.headerClick($event):null"></i>
          </template>
          <!-- <i class="el-icon-d-arrow-left upIcon large" v-show="!tableParam.headerActionIconVal" @click="scope.row[item.headerProp]=!scope.row[item.headerProp],item.$event&&item.$event.headerClick?item.$event.headerClick($event):null"></i> -->
        </template>
        <!-- :show-overflow-tooltip="item.tooltip ? item.tooltip : true" -->
        <template  #default="scope" v-if="item.isShow ? item.isShow : true">
          <!-- 普通数据渲染 -->
          <i v-if="item.icon" :class="item.icon"></i>
          <span v-if="item.prop && !item.types && item.type !== 'action'" :style="item.style?item.style:''">
            {{
              item.formatter ? item.formatter(scope.row) : scope.row[item.prop]
            }}
          </span>
          <!-- 自己加的新增序号 -->
          <span v-if="item.prop && item.prop === 'index'">
            {{ scope.$index + 1 }}
          </span>
          <span v-if="item.prop && item.prop === 'myIndex'">
            {{ scope.row['index'] }}
          </span>
          <!-- 标签过滤 -->
          <span v-if="item.types === 'tag'">
            <el-tag
              :type="item.type ? item.type : ''"
              :key="index"
              size="default"
              v-if="item.displayVal"
              close-transition
            >
              {{ formDataNew(scope.row[item.prop],item.data,item.value,item.displayVal) }}
            </el-tag>
          </span>
          <!-- 标签过滤 -->
          <span v-if="item.types === 'tags'">
            <el-tag
              v-for="(i, index) in scope.row[item.prop]"
              :type="item.type ? item.type : ''"
              :key="index"
              size="default"
              close-transition
            >
              {{ i[item.showName] }}
            </el-tag>
          </span>
          <!-- 多个标签过滤 -->
          <span v-if="item.types === 'tagsFilter'">
            <span v-for="(i,index1) in item.data" :key="index1">
              <el-tag
                size="default"
                v-if="scope.row[item.prop]&&scope.row[item.prop].includes(i[item.initDatas.value])"
                close-transition
              >
                {{ i[item.initDatas.name] }}
              </el-tag>
            </span>
          </span>
          <!-- 标签过滤 -->
          <span v-if="item.types === 'statusTag'">
            <span v-for="(i,index1) in item.data" :key="index1">
              <el-tag
                :type="i.type ? i.type : ''"
                size="default"
                v-if="i.value===scope.row[item.prop]"
                close-transition
              >
                {{ i.lable }}
              </el-tag>
            </span>
          </span>
          <span v-if="item.types === 'switch'">
            <el-switch
              v-model="scope.row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-hasPermi="item.btnPermission && item.btnPermission.length ? item.btnPermission : ['*:*:*'] "
              @change="item.$events&&item.$events.change?item.$events.change($event,scope.row):tableSwitch($event, scope.row)"
            >
            </el-switch>
          </span>
          <span v-if="item.types === 'dateTime'">
            <span v-if="scope.row[item.prop]&&!item.valueFormat"> {{formDataTime(scope.row[item.prop])}}</span>
            <span v-else-if="scope.row[item.prop]&&item.valueFormat"> {{formDataTime(scope.row[item.prop],item.valueFormat)}}</span>
           <span v-else>{{item.nullSolt?item.nullSolt:''}}</span>
          </span>
          <span v-if="item.types === 'price'">
            {{ formDataPrice(scope.row[item.prop],item.precision?item.precision:3) }}
          </span>
          <span v-if="item.types === 'dictTag'">
            <!-- {{Array.from(item.data)}} -->
            <!-- {{item.data}} -->
            <dict-tag :options="item.data" :value="scope.row[item.prop]" />
          </span>
          <span v-if="item.types === 'booleanTag'">
            <el-tag
              size="default"
              v-if="item.nullLable&&!item.isAfterSale"
              :style="item.style ? item.style : ''"
              :type="item.type ? item.type : scope.row[item.prop]==1?'':scope.row[item.prop]!=2?'':'danger'"
            >
             {{ scope.row[item.prop]==1?item.trueLable:scope.row[item.prop]!=2?item.nullLable:item.falseLable}}
            </el-tag>
            <el-tag
              size="default"
              v-else-if="item.isAfterSale"
              :style="item.style ? item.style : ''"
              :type="item.type ? item.type : scope.row[item.prop]==1?'':scope.row[item.prop]!==0?'':'danger'"
            >
             {{ scope.row[item.prop]==1?item.trueLable:scope.row[item.prop]!==0?item.nullLable:item.falseLable}}
            </el-tag>
            <el-tag
              size="default"
              v-else-if="item.isDeleted"
              :style="item.style ? item.style : ''"
              :type="item.type ? item.type : scope.row[item.prop]==1?'danger':''"
            >
             {{ scope.row[item.prop]==1?item.falseLable:item.trueLable}}
            </el-tag>
            <el-tag
              size="default"
              v-else
              :style="item.style ? item.style : ''"
              :type="item.type ? item.type : scope.row[item.prop]||scope.row[item.prop]==1?'':'danger'"
            >
             {{ scope.row[item.prop]||scope.row[item.prop]==1?item.trueLable:item.falseLable}}
            </el-tag>
          </span>
          <!-- 旗帜 -->
          <span v-if="item.types === 'flag'">
            <span v-for="item1 in item.options" :key="item1.value">
              <i class="el-icon-s-flag" :style="'color:'+item1.color" v-if="scope.row[item.prop]==item1.value"></i>
            </span>
          </span>
          <span v-if="item.types === 'actionIcon'">
            <i class="el-icon-d-arrow-left upIcon" v-show="scope.row[item.prop]" @click="scope.row[item.prop]=!scope.row[item.prop],item.$events&&item.$events.click?item.$events.click($event,scope.row):null"></i>
            <i class="el-icon-d-arrow-right upIcon" v-show="!scope.row[item.prop]" @click="scope.row[item.prop]=!scope.row[item.prop],item.$events&&item.$events.click?item.$events.click($event,scope.row):null"></i>
          </span>
          <!-- <span v-if="item.types === 'selete'">
            <ComSelect :item="item" :form="scope.row"  v-if="!item.hidden"/>
          </span> -->
          <template v-if="item.types === 'img'">
            <div style="width:69px;height:69px">
              <!-- :width="item.imgWidth||400" -->
              <el-popover
                placement="right"
                :width="item.imgWidth||240"
                trigger="hover"
                v-if="scope.row[item.prop]"
                popper-class="popoverBox"
              >
                <template slot="reference">
                  <img :src="(item.hidlenBaseUrl?'':fileBaseUrl)+scope.row[item.prop]" :alt=" scope.row[item.prop] ? scope.row[item.prop] : '无照片' " class="scopeImg"  :style= "tableParam.mark ? 'width: 100%;height: 100%;display:inline-block;object-fit:contain;margin:0 auto;margin-left: 50px' : 'width: 100%;height: 100%;display:inline-block;object-fit:contain;margin:0 auto;margin-left: 6px'" />
                  <!-- <img :src="scope.row[item.prop]" :alt=" scope.row[item.prop] ? scope.row[item.prop] : '无照片' " class="scopeImg"  style="width: 100px; height: 100px;display:inline-block;object-fit:contain;margin:0 auto"> -->
                </template>
                <img :src="(item.hidlenBaseUrl?'':fileBaseUrl)+scope.row[item.prop]"  class="enlargeImg" alt="图片url错误" />
                <!-- <img :src="(item.hidlenBaseUrl?'':fileBaseUrl)+scope.row[item.prop]"  class="imgItem" alt="图片url错误" style= "width: 80%;height: 80%;display:inline-block;object-fit:contain;margin:0 auto;margin-left: 40px" /> -->
                <!-- <img :src="scope.row[item.prop]"  class="imgItem" :alt=" scope.row[item.prop] ? scope.row[item.prop] : '无照片' " style="width: 100%;display:inline-block;object-fit:contain;margin:0 auto"> -->
              </el-popover>
              <div v-else style="line-height:69px">暂无图片</div>
            </div> 
          </template>
          <template v-if="item.types === 'goodsList'">
            <span v-if="scope.row['goodsList']&&scope.row['goodsList'].length>0">
              <span v-for="(item1,index1) in scope.row['goodsList']" :key="index1">
                <el-popover
                  placement="right"
                  :width="item.width||200"
                  trigger="hover"
                  v-if="item1['skuImage']"
                >
                  <template slot="reference">
                    <img :src="(item.hidlenBaseUrl?'':fileBaseUrl)+item1['skuImage']" :alt=" item1['skuImage'] ? item1['skuImage'] : '无照片' " class="scopeImg"  style="width: 16px; height: 16px;display:inline-block;object-fit:contain;margin:0 auto" />
                  </template>
                  <img :src="(item.hidlenBaseUrl?'':fileBaseUrl)+item1['skuImage']"  class="imgItem" alt="图片url错误" style="width: 100%;height: 100%;display:inline-block;object-fit:contain;margin:0 auto" />
                </el-popover>
                <span v-else>无</span>
                <span>
                  <span>
                    x 
                    <el-tag
                      size="default"
                    >
                    1
                    </el-tag>
                  </span>
                  <span  v-if="item1.orderGoodsGiftList&&item1.orderGoodsGiftList.length>0">
                    <i class="el-icon-picture"></i>
                    <span>x
                      <el-tag
                        size="default"
                      >
                      {{item1.orderGoodsGiftList.length||0}}
                      </el-tag>
                    </span>
                  </span>
                </span>
                <br v-if="index1!=scope.row['goodsList'].length-1">
              </span>
            </span>
            <span v-else>暂无商品</span>
          </template>
          <span v-if="item.types === 'number'">
            <el-input-number
              v-model="scope.row[item.prop]"
              @change="item.$events&&item.$events.change?item.$events.change($event,scope.row, scope.row, item.prop):numberChange($event, scope.row, item.prop)"
              :min="item.min || item.min == 0 ? item.min : 0.001"
              :max="item.max ? item.max : 10000000"
              :size="item.size ? item.size : 'default'"
              :precision="item.precision||item.precision===0 ? item.precision : 3"
              style="width:80%"
            ></el-input-number>
          </span>
          <span v-if="item.types === 'numberHasNull'">
            <el-input-number
              v-model="scope.row[item.prop]"
              @change="numberChange($event, scope.row, item.prop)"
              :min="item.min || item.min == 0 ? item.min : 0.001"
              :max="item.max ? item.max : 100000000"
              :size="item.size ? item.size : 'default'"
              :precision="item.precision||item.precision===0 ? item.precision : 3"
              style="width:80%"
            ></el-input-number>
            <!-- <span v-else></span> -->
          </span>
          <span v-if="item.types === 'input'">
            <el-input
              v-model.trim="scope.row[item.prop]"
              :placeholder="'请输入' + item.label"
              :maxlength="50"
              spellcheck="false"
              @blur="item.$events&&item.$events.blur?item.$events.blur($event,scope.row):inpEnter(scope.row)"
            ></el-input>
            <!-- @keyup.enter.native="inpEnter(scope.row)" -->
          </span>
          <span v-if="item.types === 'select'">
            <!-- {{item.options}} -->
            <!-- {{item.initDatas.name}}
            {{item.initDatas.value}} -->
            <!-- item.options._object.sys_notice_status -->
            <el-select
              v-model="scope.row[item.prop]"
              :size="item.size?item.size:'default'"
              filterable
              :allow-create=" item.allowCreate ? item.allowCreate : false "
              :disabled="item.disabled ? item.disabled : false"
              :multiple="item.multiple ? item.multiple : false"
              @change="item.$events && item.$events.change ? item.$events.change($event,scope.row) : null "
              :placeholder="item.placeholder||'请选择'"
            >
              <el-option  v-for="(opt,index) in  item.options" 
              :key="index" 
              :label="(item.initDatas&&item.initDatas.name)?opt[item.initDatas.name]:opt.label"
               :value="(item.initDatas&&item.initDatas.value)?opt[item.initDatas.value]:opt.value"/>
            </el-select>
          </span>
          <!-- <span v-if="item.types === 'radio'">
            <ComRadio :item="item.item" :form="scope.row" />
          </span> -->
          <div v-if="item.types === 'printerLabelStatus'||item.types === 'printerOrderStatus'||item.types === 'shippedNum'" class="batchStatus">
            <!-- 批次管理-已生成-状态颜色 -->
            <div v-if="item.types === 'printerLabelStatus'" :class="scope.row.printerLabelNum==0?'colItemRed':(scope.row.goodsNum==scope.row.printerLabelNum?'colItemGreen':'colItemYellow')">
              {{scope.row.printerLabelNum?scope.row.printerLabelNum:0}}/{{scope.row.goodsNum}}
            </div>
            <div v-else-if="item.types === 'printerOrderStatus'" :class="scope.row.printerOrder==0?'colItemRed':(scope.row.goodsNum==scope.row.printerOrder?'colItemGreen':'colItemYellow')">
              {{scope.row.printerOrder?scope.row.printerOrder:0}}/{{scope.row.goodsNum}}
            </div>
            <div v-else-if="item.types === 'shippedNum'" :class="(scope.row.goodsNum-scope.row.shippedNum==0)?'colItemRed':(scope.row.shippedNum==0?'colItemGreen':'colItemYellow')">
              {{scope.row.goodsNum-scope.row.shippedNum}}/{{scope.row.goodsNum}}
            </div>
          </div>
          <span v-if="item.types === 'tooltip'">
            <el-tooltip
              class="item"
              effect="dark"
              content="Left Top 提示文字"
              placement="left-start"
            >
              {{ scope.row[item.prop] }}
            </el-tooltip>
          </span>
          <!-- 按钮操作渲染 -->
          <div v-if="item.type === 'action'" class="activeBox">
            <div v-if="item.row">
              <el-row>
                <el-col
                  :span="item.row"
                  v-for="(item1, index1) in item.opers"
                  :key="index1"
                >
                <!-- hiddenBtnText控制按钮样式text -->
                  <el-button
                    :class="item1.class ? item1.class : (!item1.hiddenBtnText&&item1.type=='danger'?'btnRed':null)"
                    :type="item1.hiddenBtnText?(item1.type ? item1.type : 'primary'):'text'"
                    :size="item1.size ? item1.size : 'default'"
                    v-if="!item1.hidden || !item1.hidden(scope.row)"
                    v-hasPermi="item1.btnPermission && item1.btnPermission.length ? item1.btnPermission : ['*:*:*'] "
                    :disabled="item1.disabled?item1.disabled(scope.row):false"
                    :icon="item1.icon ? item1.icon : ''"
                    style="margin-right:6px;margin-bottom:4px"
                    @click="item1.click && item1.click(scope.row)"
                  >
                  <!-- :type="item1.type || 'text'" -->
                    {{ item1.name }}
                  </el-button>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <span v-for="(item1, index1) in item.opers" :key="index1">
                <el-button
                  :class="item1.class ? item1.class : (!item1.hiddenBtnText&&item1.type=='danger'?'btnRed':null)"
                  :type="item1.hiddenBtnText?(item1.type ? item1.type : 'primary'):'text'"
                  :size="item1.size ? item1.size : 'default'"
                  v-if="item1.name&&!item1.actionIcon&&(!item1.hidden || !item1.hidden(scope.row))"
                  v-hasPermi="item1.btnPermission && item1.btnPermission.length ? item1.btnPermission : ['*:*:*'] "
                  :disabled="item1.disabled?item1.disabled(scope.row):false"
                  :icon="item1.icon ? item1.icon : ''"
                  style="margin-right:6px;margin-bottom:4px"
                  @click="item1.click && item1.click(scope.row)"
                >
                  {{ item1.name }}
                </el-button>
                <el-tooltip class="item" effect="dark" v-if="item1.showTooltip" :content="item1.toolTip" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <template v-if="item1.actionIcon">
                  <i class="el-icon-d-arrow-left upIcon" v-show="scope.row[item1.prop]" @click="scope.row[item1.prop]=!scope.row[item1.prop],item1.$events&&item1.$events.click?item1.$events.click($event,scope.row):null"></i>
                  <i class="el-icon-d-arrow-right upIcon" v-show="!scope.row[item1.prop]" @click="scope.row[item1.prop]=!scope.row[item1.prop],item1.$events&&item1.$events.click?item1.$events.click($event,scope.row):null"></i>
                </template>
                <template v-if="item1.isIconBtn">
                  <i class="icon" :class="item1.icon||'el-icon-d-arrow-left'" @click="item1.click?item1.click(scope.row):null"></i>
                </template>
              </span>
            </div>
          </div>

          <!-- <span v-if="item.formatter" v-html="item.formatter(scope.row,item.key,scope.row[item.key],index)"></span> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {formDataTime,formDataPrice,formDataNew} from "@/filters"
const props = defineProps({
  tableParam: {
    type: Object,
    default: ()=>{
      columns: {}
    },
  },
  tableData: {
    type: Array,
    default: () => {
      return [];
    },
  },
  listLoading: {
    type: Boolean,
    required: false,
    default: false,
  },
  callbackParam: {
    required: false,
  },
})
const emit = defineEmits();
const rowSelections = ref(null);
const fileBaseUrl = ref(localStorage.getItem("fileBaseUrl") || "");

// function handleSelectionChange(val) {
//   rowSelections.value = val;
// }
function handleSortChange(column, prop, order){
  // console.log('handleSortChange',column + '-' + column.prop + '-' + column.order)
  emit("sortChange",column, prop, order);
}
function select(selection, row) {
  emit("select", selection, row);
}
function selectAll(selection) {
  emit("selectAll", selection);
}
function handleSelectionChange(selection) {
  emit("handleSelectionChange", selection);
}
function tableSwitch(e, row) {
  emit("tableSwitch", e, row);
}
function numberChange(e, row, prop) {
  emit("numberChange", e, row, prop);
}
function inpEnter(row) {
  emit("inpEnter", row);
}
</script>
<style lang="scss" scoped>
/* th.is-leaf {
  border: 1px solid #3268c6;
} */
// 隐藏折叠小箭头
:deep(.el-table__expand-icon) {
  display: none;
}
.el-table{
  overflow: auto;
  width: 100%;
}



span.el-tag.el-tag--default.el-tag--light {
  margin-right: 5px;
}
>>>.el-input input{
  text-align: center;
}
.imgItem{
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.upIcon{
  transform: rotate(90deg);
  cursor: pointer;
  &.large{
    font-size: 20px;
  }
}
.icon{
  cursor: pointer;
}
.activeBox :deep(.el-button--text){
  text-align: left;
  &.btnRed{
    color:red;
  }
}

// .tableBox1 {
//   padding: 0 20px;
//   position: absolute;
//   left: 0;
//   width: 100%;
// }
:deep(.el-table__body .el-table__row td.colItem) {
  width: 100%;
  height: 100%;
  padding: 0;
  // background-color: #52c41b;
  // color:#fff;
  .cell{
    width: 100%;
    // height: 100%;
    padding: 0!important;
    min-height: 85px!important;
    .batchStatus{
      min-height: 85px;
      width: 100%;
      // background-color: #52c41b;
      color:#fff;
      div{
        min-height: 85px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.colItemGreen{
          background-color: #52c41b!important;
        }
        &.colItemYellow{
          background-color: #fbad14!important;
        }
        &.colItemRed{
          background-color: #f5222d!important;
        }
      }
    }
  }
}
.activation{
  cursor: pointer;
  color: #ff4949;
  font-size: 16px;
}
// .popoverBox{
//   padding: 0!important;
//   background: red!important;
// }
.enlargeImg {
  width: 240px;
  height: 240px;
  object-fit: contain;
  background-color: #fff;
  border: 8px solid #c0e1fc;
  border-radius: 8px;
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

</style>
